<template>
    <div class="shop-preview">
        <div class="preview-head">
            <div class="preview-head__text"></div>
        </div>
        <!-- 放置首页样式 -->
        <div class="preview-body">
            <template v-if="switchs">
                <Transition name="slide">
                    <div class="right-pendant flexs-center" v-show="isActive">
                        <div class="pend-item">
                            <el-icon color="#fff">
                                <House />
                            </el-icon>
                        </div>
                        <div class="pend-item">
                            <el-icon color="#fff">
                                <User />
                            </el-icon>
                        </div>
                        <div class="pend-item">
                            <el-icon color="#fff">
                                <ShoppingCart />
                            </el-icon>
                        </div>
                        <div class="pend-item">
                            <el-icon color="#fff">
                                <Headset />
                            </el-icon>
                        </div>
                        <div class="pend-item" @click.stop="handleShow">
                            <el-icon color="#fff">
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </Transition>
                <div class="left-pendant flexs-center" @click.stop="handleShow" v-show="!isActive">
                    <el-icon color="#fff">
                        <ArrowLeft />
                    </el-icon>
                </div>
            </template>
        </div>
        <div class="preview-foot">
            <div class="copyright">
                <div class="ft-copyright">
                    <img :src="logo_grey" alt="花数云" />
                    <p>花数云提供技术支持</p>
                </div>
            </div>
        </div>
    </div>
    <div class="preview-edit">
        <div class="preview-edit__head">
            <div class="preview-edit__head-one flexs">
                <p>悬浮窗</p>
            </div>
            <div class="preview-edit__head-dec">悬浮窗便于你在各页面放置统一的快捷入口。</div>
        </div>
        <div class="preview-edit__body">
            <div class="preview-color__box">
                <div class="preview-color flexs">
                    <p class="preview-color__text">是否开启悬浮窗</p>
                    <el-switch v-model="switchs" @change="changeSwitch" />
                </div>
                <div class="preview-color">
                    <div class="hot-item__add flexs-center" @click.stop="toCustomer">去完善客服信息</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, computed } from "vue"
import { useRouter } from "vue-router"
import { House, User, ArrowRight, ArrowLeft, Headset, ShoppingCart } from "@element-plus/icons-vue"
import { useBaseStore } from "@store/base"
import logo_grey from "@images/logo_grey.png"

const router = useRouter()
const { proxy } = getCurrentInstance()
const storeBase = useBaseStore()
const navName = computed(() => {
    return storeBase.navName
})

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios.get('decorate/suspension').then(res => {
        if (res.data.code == 0) {
            let result = res.data.data.style
            switchs.value = result.switchs
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => { })
}

/**
 * 保存
 * @param {Boolean} switchs 开关
 * @param {String} phone 客服电话
 */
const switchs = ref(true)
const changeSwitch = (val) => {
    let objs = {
        switchs: val
    }
    proxy.$axios.post('decorate/suspension', {
        style: JSON.stringify(objs)
    }).then(res => {
        if (res.data.code == 0) {
            proxy.$message({ message: "保存成功！", type: "success" })
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {})
}
const toCustomer = () => {
    let nav_index = navName.value.findIndex((item) => item == "设置")
    nav_index = nav_index == -1 ? 0 : nav_index
    storeBase.setCur(nav_index)
    router.push("/Setup/CustomerSetup")
}

// 显示/隐藏悬浮窗
const isActive = ref(true)
const handleShow = () => {
    isActive.value = !isActive.value
}
</script>
<script>
export default {
    name: "DecoSuspen",
}
</script>

<style lang="less" scoped>
.hot-item__add {
    cursor: pointer;
    margin-top: @margin-sm;
    border-radius: @radius-xs;
    border: 1px solid @themes;
    background-color: #fff;
    color: @themes;
    font-size: @font-size-md;
    padding: @padding-xs @padding-md;
}

.slide-enter-active {
    transition: all 0.5s linear;
}

.slide-leave-active {
    transition: all 0.3s linear;
}

.slide-enter-from,
.slide-leave-to {
    transform: translateX(10px);
    opacity: 0;
}

.preview-edit__body {
    padding: @padding-md @padding-md @padding-xl;

    .preview-color__box {
        margin-bottom: @margin-md;

        .preview-color__text {
            color: @gray-7;
        }

        .preview-color {
            margin-bottom: @margin-lg;
        }
    }

    .preview-input__label {
        display: flex;
        align-items: center;
        color: @gray-8;
        font-size: @font-size-md;
        margin-bottom: 10px;

        .el-icon {
            margin-left: @margin-base;
        }
    }
}

.tip-line {
    flex: none;
    width: 100%;
}

.shop-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    margin-right: @margin-sm;
    position: relative;
    flex-direction: column;
    height: calc(100vh - 120px);
    padding: @padding-mdl;
    padding-top: 50px;
}

.preview-head {
    background: url("https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_65a2bd95cd8296208c97245fb2d2e0a4.png") no-repeat center;
    background-size: cover;
    width: 375px;
    height: 64px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    position: relative;

    .preview-head__text {
        width: 180px;
        margin: 0 auto;
        text-align: center;
        padding-top: 31px;
        font-size: 16px;
        font-weight: bold;
    }
}

.preview-body {
    position: relative;
    width: 375px;
    overflow: visible;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 4px 0 rgb(0 0 0 / 10%);
    min-height: 480px;

    .left-pendant {
        background: rgba(0, 0, 0, 0.5);
        width: 36px;
        height: 36px;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        overflow: hidden;
        position: absolute;
        bottom: 80px;
        right: 0;
        z-index: 10;
        cursor: pointer;
    }

    .right-pendant {
        background: rgba(0, 0, 0, 0.5);
        width: 36px;
        overflow: hidden;
        position: absolute;
        bottom: 80px;
        right: 0;
        z-index: 10;
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        flex-flow: row wrap;

        .pend-item {
            flex: none;
            text-align: center;
            border-bottom: 1px solid #999;
            padding: 7px 0px;

            &:nth-last-child(1) {
                cursor: pointer;
            }
        }
    }

    .el-icon {
        font-size: 20px;
        color: @gray-2;
    }
}

.preview-foot {
    min-height: 1px;
    text-align: center;
    line-height: 16px;
    background-color: #f8f8f8;
    width: 375px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    overflow: hidden;

    .copyright {
        background-color: #fff;
        position: relative;
        color: #999;
        text-align: center;
    }

    .ft-copyright {
        padding: 20px 16px 10px;
        text-align: center;
        cursor: pointer;
    }

    .ft-copyright img {
        width: 30px;
    }

    .ft-copyright p {
        font-size: 12px;
        color: #bfbfc3;
        padding: 6px 0px 10px;
    }
}

.preview-edit {
    flex: none;
    width: 376px;
    height: calc(100vh - 120px);
    background-color: #fff;
    overflow-y: auto;

    /*滚动条整体样式*/
    &::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 6px;
        height: 1px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: @gray-4;
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f1f1f1;
    }

    .preview-edit__head {
        border-bottom: 1px solid #f2f4f6;
        padding: @padding-lg @padding-md;

        .preview-edit__head-one {
            font-size: 18px;
            font-weight: bold;
            color: @gray-8;
        }

        .preview-edit__head-dec {
            font-size: @font-size-md;
            color: @gray-6;
            margin-top: @margin-sm;
        }
    }
}</style>
